<!DOCTYPE html>
<html style="background-color: #000;">

<head>
    <meta charset="utf-8">
    <title>轮盘时钟</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }


        #app {
            position: relative;
            font-family: 微软雅黑;
            background-color: #000;
        }

        #app h2 {
            color: #ffffff;
            text-align: center;
        }

        .s,
        .i,
        .h,
        .d,
        .w,
        .m,
        .y {
            position: absolute;
            top: 360px;
            left: 50%;
            transition: transform 1s;
            text-shadow: 1px 1px 2px #000;
        }

        .y {
            left: 743px;
            top: 357px;
            font-weight: bold;
            font-size: 20px;
            color: #ffffff;
        }

        .m {
            color: rgb(245, 18, 18);
        }

        .d {
            color: rgb(0, 255, 115);
        }

        .w {
            color: rgb(100, 232, 237);
        }

        .h {
            color: rgb(211, 233, 13);
        }

        .i {
            color: rgb(57, 20, 220);
        }

        .s {
            color: rgba(255, 255, 255, 0.979);
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <div class="container">
            <h2>轮盘时钟</h2>
            <div v-for="s in 60" class="s"
                v-bind:style="{transform:'translate('+300*Math.cos((s+second)*Math.PI/30)+'px,'+300*Math.sin((s+second)*Math.PI/30)+'px)'}">
                {{60-s}}</div>
            <div v-for=" i in 60" class="i"
                v-bind:style="{transform:'translate('+250*Math.cos((i+minute)*Math.PI/30)+'px,'+250*Math.sin((i+minute)*Math.PI/30)+'px)'}">
                {{60-i}}</div>
            <div v-for="h in 24" class="h"
                v-bind:style="{transform:'translate('+200*Math.cos((hour+h)*Math.PI/12)+'px,'+200*Math.sin((hour+h)*Math.PI/12)+'px)'}">
                {{24-h}}</div>
            <div v-for="w in 7" class="w"
                v-bind:style="{transform:'translate('+170*Math.cos(2*(w+week)*Math.PI/7)+'px,'+170*Math.sin(2*(w+week)*Math.PI/7)+'px)'}">
                {{zw[7-w]}}</div>
            <div v-for="d in 31" class="d"
                v-bind:style="{transform:'translate('+140*Math.cos(2*(d+day-1)*Math.PI/31)+'px,'+140*Math.sin(2*(d+day-1)*Math.PI/31)+'px)'}">
                {{32-d}}</div>
            <div v-for=" m in 12" class="m"
                v-bind:style="{transform:'translate('+70*Math.cos((month+m)*Math.PI/6)+'px,'+70*Math.sin((month+m)*Math.PI/6)+'px)'}">
                {{13-m}}</div>
            <div class="y">{{year}}</div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                year: 0,
                month: 0,
                day: 0,
                week: 0,
                hour: 0,
                minute: 0,
                second: 0,
                zw: ['日', '一', '二', '三', '四', '五', '六']
            },
            created() {
                setInterval(() => {
                    var date = new Date()
                    this.year = date.getFullYear()
                    this.month = date.getMonth()
                    this.day = date.getDate()
                    this.week = date.getDay()
                    this.hour = date.getHours()
                    this.minute = date.getMinutes()
                    this.second = date.getSeconds()
                    console.log(this.second)
                }, 1000)
            }
        })
    </script>
</body>

</html>